<template>
  <view class="expert-page">
    <view class="expert-tab">
      <up-tabs :list="listData" lineColor="linear-gradient(90deg, #A4682F 0%, transparent 100%)" lineHeight="16rpx"
        lineWidth="64rpx" :activeStyle="{
      color: '#333333', 
      fontWeight: '500',
      fontSize:'32rpx'}" :inactiveStyle="{
       color: '#666666',
       fontWeight: '400',
       fontSize:'28rpx'}" @click="click"></up-tabs>
    </view>
    <view class="expert-content">
      <mescroll-uni @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback" :fixed="false">
        <view class="content-nav" v-for="item,index in orderList" @click="todetail(item.id)">
          <view class="content-head">
            <view class="head-avatar">
              <image :src="item.avatar" mode="" class="avatar-img"></image>
            </view>
            <view class="head-name">
              <view>{{item.nickname}}</view>
              <view class="head-title">擅长{{item.expertise}}</view>
            </view>
            <view class="head-btn">
              <view class="btn-nav" @click.stop="onRelease(item)">鉴定</view>
            </view>
          </view>
          <view class="content-title">{{item.desc}}</view>
          <view class="content-label">
            <view class="label-box">
              <view class="box-num">
                <view>{{item.count}}</view>
                <view class="num-unit">次</view>
              </view>
              <view class="box-title">累计鉴定</view>
            </view>
            <view class="label-box">
              <view class="box-price">
                <view class="price-unit">￥</view>
                <view>{{item.price}}</view>
              </view>
              <view class="box-title">鉴定费用</view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
    <view class="expert-btn">
      <up-button text="立即入驻" shape="circle" color="#A4682F" @click="onsettled"></up-button>
    </view>
  </view>
  <tab-popup :show.sync="show" :listData="classificationList" @showClose="show = false"
    @release="onrelease"></tab-popup>
</template>

<script setup>
  import {
    expertList
  } from './api.js'
  import {
    ref,
    reactive
  } from 'vue'
  import {
    onLoad,
    onShow,
    onPageScroll,
    onReachBottom
  } from '@dcloudio/uni-app';
  import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
  const {
    mescrollInit,
    downCallback,
    getMescroll
  } = useMescroll(onPageScroll, onReachBottom)
  const orderList = ref([])
  const current = ref(0)
  const listData = ref([])
  const show = ref(false)
  const classificationList = ref([])
  const expertId = ref()
  const upOption = ref({
    empty: {
      tip: '~ 暂无相关专家 ~'
    }
  })
  onLoad(() => {
    listData.value = uni.getStorageSync("classificationList")
    listData.value.unshift({
      name: "推荐"
    })
  })

  function click(e) {
    current.value = e.id
    downCallback()
  }

  const upCallback = (mescroll) => {
    expertList({
      category_id: current.value,
      page: mescroll.num
    }).then(res => {
      const curPageData = res.data.data || [] // 当前页数据
      const totalPage = res.data.total
      if (mescroll.num == 1) orderList.value = []; // 第一页需手动制空列表      
      orderList.value = orderList.value.concat(curPageData); //追加新数据
      mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)
      mescroll.endSuccess(curPageData.length)
    }).catch(() => {
      mescroll.endErr()
    })
  }

  function onRelease(item) {
    const list = item.expertise.split(',')
    expertId.value = item.id
    classificationList.value = listData.value.filter(item => list.includes(item.name))
    if (list.length > 1) {
      show.value = true
    } else {
      if (uni.getStorageSync('userInfo').token) {
        uni.setStorageSync('treasure', classificationList.value[0])
        uni.navigateTo({
          url: `/pages/index/identifyPage/identifyRelease?expertId=${item.id}`
        })
      } else {
        uni.navigateTo({
          url: '/pages/my/loginPage'
        })
      }
    }
  }

  function todetail(id) {
    uni.navigateTo({
      url: `/pages/index/ExpertPanelPage/expertDetail?id=${id}`
    })
  }

  function onsettled() {
    if (uni.getStorageSync('userInfo').token) {
      uni.navigateTo({
        url: '/pages/index/ExpertPanelPage/expertSettled'
      })
    } else {
      uni.navigateTo({
        url: '/pages/my/loginPage'
      })
    }
  }

  function onrelease(val) {
    show.value = false
    uni.navigateTo({
      url: `/pages/index/identifyPage/identifyRelease?expertId=${expertId.value}`
    })
  }
</script>

<style lang="scss" scoped>
  .expert-page {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;

    .expert-tab {
      background-color: #fff;
      height: 96rpx;

      ::v-deep .u-tabs__wrapper__nav__line {
        border-radius: 0;
        bottom: 16rpx;
      }

      ::v-deep .u-tabs__wrapper__nav__item {
        padding: 0 24rpx;
      }
    }

    .expert-content {
      flex: 1;
      overflow: scroll;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 0 30rpx;

      .content-nav {
        width: 690rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding: 30rpx 30rpx 0;

        .content-head {
          display: flex;
          width: 100%;
          align-items: center;

          .head-avatar {
            height: 100rpx;
            width: 100rpx;
            border-radius: 50%;

            .avatar-img {
              height: 100rpx;
              width: 100rpx;
              border-radius: 50%;
            }
          }

          .head-name {
            flex: 1;
            margin: 0 24rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);

            .head-title {
              font-size: 26rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-top: 4rpx;
            }
          }

          .head-btn {
            width: 136rpx;
            height: 64rpx;


            .btn-nav {
              width: 136rpx;
              height: 64rpx;
              border-radius: 44rpx;
              border: 2rpx solid rgba(164, 104, 47, 1);
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(164, 104, 47, 1);
              display: flex;
              align-items: center;
              justify-content: center;

            }
          }
        }

        .content-title {
          margin-top: 24rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.5;
        }

        .content-label {
          width: 100%;
          height: 140rpx;
          border-top: 2rpx solid #ebebeb;
          margin-top: 30rpx;
          box-sizing: border-box;
          padding: 30rpx 0;
          display: flex;

          .label-box {
            height: 100%;
            flex: 1;
            border-right: 2rpx solid #ebebeb;
            display: flex;
            flex-direction: column;
            align-items: center;

            .box-num {
              font-size: 36rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              display: flex;
              align-items: baseline;

              .num-unit {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin: 0 4rpx;
              }
            }

            .box-price {
              font-size: 36rpx;
              font-weight: 400;
              color: rgba(245, 32, 32, 1);
              display: flex;
              align-items: baseline;

              .price-unit {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(245, 32, 32, 1);
              }
            }

            .box-title {
              margin-top: 4rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);

            }
          }

          .label-box:last-child {
            border: none;
          }
        }
      }
    }

    .expert-btn {
      width: 690rpx;
      height: 88rpx;
      // position: fixed;
      // bottom: 12rpx;
      margin: auto;
    }
  }
</style>